<template>
  <div :class="className" :style="{width:width, height:height}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    theme: {
      type: String,
      default: ''
    },
    animationDuration: {
      type: Number,
      default: 2000
    },
    dataSource: {
      type: Object,
      required: true
    }
  },
  watch: {
    dataSource: {
      handler(newVal, _) {
        this.handleDataSource(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      chart: null,
      chartOption: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    this.disposeChart()
  },
  methods: {
    handleDataSource(obj) {
      // do sth
    },
    disposeChart() {
      if (!this.chart) return
      
      this.chart.dispose()
      this.chart = null
    },
    initChart() {
      this.disposeChart()

      this.chart = echarts.init(this.$el, this.theme)
      this.chartOption = this.initChartOption()
      if (!this.chartOption) return

      this.chart.setOption(this.chartOption)

      this.registerClickEvent()
    },
    initChartOption() {
      // return obj
      return null
    },
    initTitle() {
        // 标题组件，包含主标题和副标题
       const title = {
          // 主标题文本，支持使用 \n 换行
          text: this.title,
          textStyle: {
            // 主标题文字的颜色
            color: '#333',
            // 主标题文字字体的风格 可选：'normal' 'italic' 'oblique'
            fontStyle: 'normal',
            // 主标题文字字体的粗细 可选：'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
            fontWeight: 'bolder',
            // 主标题文字的字体系列 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
            fontFamily: 'sans-serif',
            // 主标题文字的字体大小
            fontSize: 14
          }
        }
        return title
    },
    initGrid() {
      // 直角坐标系内绘图网格
      const grid = {
        // grid 组件离容器左侧的距离
        left: '3%',
        // grid 组件离容器右侧的距离
        right: '3%',
        // grid 组件离容器下侧的距离
        bottom: '3%',
        // grid 区域是否包含坐标轴的刻度标签
        containLabel: true
      }
      return grid
    },
    initTooltip() {
      // 提示框组件
      const tooltip = {
        // 触发类型
        trigger: 'axis',
        // 坐标轴指示器配置项
        axisPointer: {
          // 指示器类型 可选 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
          type: 'cross',
          // 坐标轴指示器的文本标签
          label: {
            // 文本标签的背景颜色，默认是和 axis.axisLine.lineStyle.color 相同
            backgroundColor: '#6a7985'
          }
        }
      }
      return tooltip
    },
    initToolbox() {
      // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
      const toolbox = {
        // 各工具配置项
        feature: {
          // 保存为图片
          saveAsImage: { show: true },
          // 配置项还原
          restore: { show: true },
          // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
          dataView: { show: true, readOnly: false },
          // 动态类型切换
          magicType: { show: true, type: ['line', 'bar'] }          
        }
      }
      return toolbox
    },
    registerClickEvent() {
      this.chart.off("click")
      this.chart.on("click", (params) => {
        // console.log("click", params)

        const event = params.event
        if (event && event.event) event.event.stopPropagation()

        let { componentType: type, componentSubType: subType } = params
        // console.log(type, subType)

        if (type === "series") {
          if (subType === "line") {
            this.$emit("clickLine", params)
          } else if (subType === "bar") {
            this.$emit("clickBar", params)
          } else if (subType === "pie") {
            this.$emit("clickPie", params)
          }
        }
      })
    }
  }
}
</script>